<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>

</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. 动态组件
       <component :is="组件名"/>
      2. 异步组件
      - Vue.defineAsyncComponent()
      - 组件内容异步生成
      3. 异步组件的应用
      - 将组件封装到不同的文件中
      - 在需要用到这些组件时，再动态加载文件
    */

    const child = {
      template: `<div>
          child 
      </div>`,
      mounted() {
        console.log(this.$refs.title)
      },
    }
    const son = {
      template: `<div>
        son
      </div>`,
      components: { child }
    }
    const app = Vue.createApp({
      data() {
        return {
          isShow: true
        }
      },
      components: { son, child },
      template: `<div>
        <component :is="isShow?'son':'child'" />
        <async-common-item />
        <button @click="isShow =!isShow">切换</button>
      </div>`
    })
    app.component('async-common-item', Vue.defineAsyncComponent(() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            template: `<h3>异步组件</h3>`
          })
        }, 1000)
      })
    }))
    const vm = app.mount('#root');
  </script>
</body>

</html>